import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import GridContent from '@/components/PageHeaderWrapper/GridContent';

const Send = React.lazy(() => import('./Send'));
const Rece = React.lazy(() => import('./Receive'));
const ChargFee = React.lazy(() => import('./ChargFee'));
const PayFee = React.lazy(() => import('./PayFee'));

@connect(({ analysisns, loading }) => ({
  analysisns,
  loadingSend: loading.effects['analysisns/fetchSendChart'],
  loadingRece: loading.effects['analysisns/fetchReceChart'],
  loadingCharg: loading.effects['analysisns/fetchChargChart'],
  loadingPay: loading.effects['analysisns/fetchPayChart'],
}))
class Analysis extends Component {
  state = {};

  componentDidMount() {
    const {
      dispatch,
      analysisns: {
        sendStartTime,
        sendEndTime,
        receStartTime,
        receEndTime,
        chargStartTime,
        chargEndTime,
        payStartTime,
        payEndTime,
      },
    } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      // 获取发单量趋势图
      dispatch({
        type: 'analysisns/fetchSendChart',
        payload: {
          startTime: sendStartTime,
          endTime: sendEndTime,
        },
      });
      // 获取接单量趋势图
      dispatch({
        type: 'analysisns/fetchReceChart',
        payload: {
          startTime: receStartTime,
          endTime: receEndTime,
        },
      });
      // 获取收费趋势图
      dispatch({
        type: 'analysisns/fetchChargChart',
        payload: {
          startTime: chargStartTime,
          endTime: chargEndTime,
        },
      });
      // 获取收费排行
      dispatch({
        type: 'analysisns/fetchChargOrder',
        payload: {
          startTime: chargStartTime,
          endTime: chargEndTime,
        },
      });
      // 获取付费趋势图
      dispatch({
        type: 'analysisns/fetchPayChart',
        payload: {
          startTime: payStartTime,
          endTime: payEndTime,
        },
      });
      // 获取付费排行
      dispatch({
        type: 'analysisns/fetchPayOrder',
        payload: {
          startTime: payStartTime,
          endTime: payEndTime,
        },
      });
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
  }

  // 选择月份面板：发单
  handleSendPanelChange = sendMonth => {
    const { dispatch } = this.props;
    const startTime = moment(sendMonth[0]).format('YYYY-MM');
    const endTime = moment(sendMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        sendMonth,
        feeStartTime: startTime,
        feeEndTime: endTime,
      },
    });
  };

  // 选择月份面板：发单
  selectSendMonth = sendMonth => {
    const { dispatch } = this.props;
    const startTime = moment(sendMonth[0]).format('YYYY-MM');
    const endTime = moment(sendMonth[1]).format('YYYY-MM');
    // 获取服务费趋势图
    dispatch({
      type: 'analysisns/fetchSendChart',
      payload: {
        startTime,
        endTime,
      },
    });
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        sendMonth,
        sendStartTime: startTime,
        sendEndTime: endTime,
      },
    });
  };

  // 选择月份面板：接单
  handleRecePanelChange = receMonth => {
    const { dispatch } = this.props;
    const startTime = moment(receMonth[0]).format('YYYY-MM');
    const endTime = moment(receMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        receMonth,
        receStartTime: startTime,
        receEndTime: endTime,
      },
    });
  };

  // 选择月份面板：接单
  selectReceMonth = receMonth => {
    const { dispatch } = this.props;
    const startTime = moment(receMonth[0]).format('YYYY-MM');
    const endTime = moment(receMonth[1]).format('YYYY-MM');
    // 获取接单趋势图
    dispatch({
      type: 'analysisns/fetchReceChart',
      payload: {
        startTime,
        endTime,
      },
    });
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        receMonth,
        receStartTime: startTime,
        receEndTime: endTime,
      },
    });
  };

  // 选择月份面板：收费
  handleChargPanelChange = chargMonth => {
    const { dispatch } = this.props;
    const startTime = moment(chargMonth[0]).format('YYYY-MM');
    const endTime = moment(chargMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        chargMonth,
        chargStartTime: startTime,
        chargEndTime: endTime,
      },
    });
  };

  // 选择月份面板：收费
  selectChargMonth = chargMonth => {
    const { dispatch } = this.props;
    const startTime = moment(chargMonth[0]).format('YYYY-MM');
    const endTime = moment(chargMonth[1]).format('YYYY-MM');
    // 获取收费趋势图
    dispatch({
      type: 'analysisns/fetchChargChart',
      payload: {
        startTime,
        endTime,
      },
    });
    // 收费排行
    dispatch({
      type: 'analysisns/fetchChargOrder',
      payload: {
        startTime,
        endTime,
      },
    });
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        chargMonth,
        chargStartTime: startTime,
        chargEndTime: endTime,
      },
    });
  };

  // 选择月份面板：付费
  handlePayPanelChange = payMonth => {
    const { dispatch } = this.props;
    const startTime = moment(payMonth[0]).format('YYYY-MM');
    const endTime = moment(payMonth[1]).format('YYYY-MM');
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        payMonth,
        chargStartTime: startTime,
        chargEndTime: endTime,
      },
    });
  };

  // 选择月份面板：付费
  selectPayMonth = payMonth => {
    const { dispatch } = this.props;
    const startTime = moment(payMonth[0]).format('YYYY-MM');
    const endTime = moment(payMonth[1]).format('YYYY-MM');
    // 获取付费趋势图
    dispatch({
      type: 'analysisns/fetchPayChart',
      payload: {
        startTime,
        endTime,
      },
    });
    // 付费排行
    dispatch({
      type: 'analysisns/fetchPayOrder',
      payload: {
        startTime,
        endTime,
      },
    });
    dispatch({
      type: 'analysisns/updateModelData',
      payload: {
        payMonth,
        chargStartTime: startTime,
        chargEndTime: endTime,
      },
    });
  };

  render() {
    const {
      analysisns: {
        // 发单
        sendData = [],
        sendMonth = [],
        sendAddTotal = 0,
        sendRedTotal = 0,
        // 接单
        receData = [],
        receMonth = [],
        receAddTotal = 0,
        receRedTotal = 0,
        // 收费
        chargData = [],
        chargMonth = [],
        chargOrderData = [],
        chargTotal = 0,
        // 付费
        payData = [],
        payMonth = [],
        payOrderData = [],
        payTotal = 0,
      },
      loadingSend,
      loadingRece,
      loadingCharg,
      loadingPay,
    } = this.props;

    return (
      <PageHeaderWrapper>
        <GridContent>
          <Suspense fallback={null}>
            <Send
              loading={loadingSend}
              sendMonth={sendMonth}
              sendData={sendData}
              handlePanelChange={this.handleSendPanelChange}
              selectMonth={this.selectSendMonth}
              sendAddTotal={sendAddTotal}
              sendRedTotal={sendRedTotal}
            />
          </Suspense>
          <Suspense fallback={null}>
            <Rece
              loading={loadingRece}
              receMonth={receMonth}
              receData={receData}
              handlePanelChange={this.handleRecePanelChange}
              selectMonth={this.selectReceMonth}
              receAddTotal={receAddTotal}
              receRedTotal={receRedTotal}
            />
          </Suspense>
          <Suspense fallback={null}>
            <ChargFee
              loading={loadingCharg}
              chargMonth={chargMonth}
              chargData={chargData}
              handlePanelChange={this.handleChargPanelChange}
              selectMonth={this.selectChargMonth}
              chargOrderData={chargOrderData}
              chargTotal={chargTotal}
            />
          </Suspense>
          <Suspense fallback={null}>
            <PayFee
              loading={loadingPay}
              payMonth={payMonth}
              payData={payData}
              handlePanelChange={this.handlePayPanelChange}
              selectMonth={this.selectPayMonth}
              payOrderData={payOrderData}
              payTotal={payTotal}
            />
          </Suspense>
        </GridContent>
      </PageHeaderWrapper>
    );
  }
}

export default Analysis;
